<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="企业名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.compName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-cascader
                  ref="industry"
                  v-model="industryId"
                  :options="industryOptionsNC"
                  @change="getIndustryId"
                  :props="{ checkStrictly: true }"
                  clearable
                  filterable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                :label="type === 'ALERT' ? '风险事件' : '事件'"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="filterField.riskEvent"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in riskEventOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="风险等级" class="row-padding-bottom">
                <el-select
                  v-model="filterField.riskLevel"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in riskLevelOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="预警时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                v-if="type === 'ALERT'"
                label="状态"
                class="row-padding-bottom"
              >
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-else label="是否失效" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in isEffectOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icondaochu"
              @click="getExportList"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <el-table
          :data="tableList"
          @sort-change="sortChange"
          v-loading="loading"
          :max-height="tableHeight"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="riskLevel"
            label="风险等级"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="riskEvent"
            label="风险事件"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="riskReason"
            label="预警原因"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="compName"
            label="触发企业"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="areaName"
            label="区域"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="riskTime"
            sortable="custom"
            :label="type === 'ALERT' ? '预警时间' : '预警时间'"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            v-if="type === 'ALERT'"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="标记"
            v-else
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapState } from 'vuex'
export default {
  name: 'riskManagementList',
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tableHeight: null,
      advanced: false,
      areaId: [],
      industryId: [],
      filterField: {
        riskType: this.type,
        compName: '',
        areaId: '',
        industryId: '',
        riskEvent: '',
        riskLevel: '',
        startTime: '',
        endTime: '',
        status: '',
      },
      requestUrl: '/api-p/companyrisk/base/list',
      pageSize: 20,
      pageNo: 1,
      riskEventOptions: [
        {
          name: '用水异常',
          code: 'WATER_ANOMALIES',
        },
        {
          name: '用电异常',
          code: 'ELECTRICITY_ANOMALIES',
        },
        {
          name: '纳税异常',
          code: 'TAX_ANOMALIES',
        },
        {
          name: '经营异常',
          code: 'BUSINESS_ANOMALIES',
        },
      ],
      riskLevelOptions: [
        {
          name: '黄色风险',
          code: 'YELLOW_RISK',
        },
        {
          name: '橙色风险',
          code: 'ORANGE_RISK',
        },
        {
          name: '红色风险',
          code: 'RED_RISK',
        },
      ],
      isEffectOptions: [
        {
          name: '是',
          code: 'FAILURE',
        },
        {
          name: '否',
          code: 'NO_FAILURE',
        },
      ],
      statusOptions: [
        {
          name: '处理中',
          code: 'PROCESSING',
        },
        {
          name: '已消除',
          code: 'ELIMINATE',
        },
      ],
      tableList: [],
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptionsNC']) },
  mounted() {
    this.filterField.areaId = localStorage.getItem('areaId')
      ? localStorage.getItem('areaId')
      : ''
    this.areaId = localStorage.getItem('areaId')
      ? localStorage.getItem('areaId')
      : ''
    if (this.type === 'ALERT') {
      this.riskEventOptions = [
        {
          name: '社保异常',
          code: 'SOCIAL_SECURITY',
        },
        {
          name: '参建项目预警',
          code: 'CONSTRUCTOR_ALERT',
        },
      ]
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 324
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 324
      }
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: this.requestUrl,
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    async getExportList() {
      const flag = await this.getExports()
      let {
        riskType,
        compName,
        areaId,
        industryId,
        riskEvent,
        riskLevel,
        startTime,
        endTime,
        status,
        sortField,
        sort,
      } = this.filterField

      if (flag) {
        window.location.href =
          common.commonApi +
          'api-p/companyrisk/base/excelExport?riskType=' +
          riskType +
          '&compName=' +
          compName +
          '&areaId=' +
          areaId +
          '&industryId=' +
          industryId +
          '&riskEvent=' +
          riskEvent +
          '&riskLevel=' +
          riskLevel +
          '&startTime=' +
          startTime +
          '&endTime=' +
          endTime +
          '&status=' +
          status +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startTime = val
      } else {
        this.filterField.startTime = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endTime = val
      } else {
        this.filterField.endTime = ''
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toDetail(row) {
      this.$router.push({
        path: '/home/enterpriseRiskManagement/warningRiskDetail',
        query: {
          id: row.id,
          type: this.type,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseRiskManagement/riskManagement',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
        ? this.areaId[this.areaId.length - 1]
        : ''
      this.filterField.areaId = areaId
    },
    //获取选中的行业最后一级id
    getIndustryId() {
      var industryId = this.industryId[this.industryId.length - 1]
      this.filterField.industryId = industryId
    },
  },
}
</script>

<style lang="less" scoped>
.proDetailsListBox {
  padding: 24px;
  background: #fff;
}
@import '../../../static/css/filterArea.less';
</style>
